<template>
  <div>
    <h3>TestProxy组件:测试Proxy代理</h3>
		<p>修改代理后的对象和原始对象的属性值，两者同步修改</p>
    <button @click="testProxyObj">点击测试ProxyObj</button>
    <button @click="testProxyArr">点击测试ProxyArr</button>
  </div>
</template>
<script>
export default {
  name: 'Proxy',
  setup() {},
  methods: {
    //set方法必须返回值告诉Proxy操作是否成功
    testProxyObj() {
      let obj = { name: 'zqf', age: 123 }
      let state = new Proxy(obj, {
        get(tar, key) {
          return tar[key]
        },
        set(tar, key, value) {
          tar[key] = value
          return true
        },
      })
      console.log(state.name)
      state.name = 'zqf123456'
      console.log(state.name)
      console.log(obj)
      console.log(state)

    },
    testProxyArr() {
      let arr = [1, 2, 3, 4]
      let state = new Proxy(arr, {
        get(tar, key) {
          // console.log(tar, key)
          return tar[key]
        },
        set(tar, key, value) {
          tar[key] = value
          // console.log(tar, key, value)
          return true
        },
      })
      console.log(state[1])
      state.push(7)
      state.length = 5
      console.log(state)
    },
  },
}
</script>